// dom 性能优化。1.缓存dom 2.用代码片段。
// dom 的结构是树结构。
// property和atrribute property修改是属性。 atrrbuite 是修改html 属性，会改变html结构。两者都有可能影响dom结构
const dom1 = document.getElementById('div1')
// for (let i = 0; i < 10; i++) {
//     const dom2 = document.createElement('p')
//     dom2.innerHTML = `这是第${i}p`
//     // 绑定点击事件
//     // dom2.onclick = function () {
//     //     alert(i)
//     // }
//     // 绑定点击事件
//     dom2.addEventListener('click', function(e) {
//         // alert(i)
//         console.log(i, e)
//     })
//     dom1.appendChild(dom2)
// }
// 方法2 通过代码片段操作
const domPage = document.createDocumentFragment()
for (let i = 0; i < 10; i++) {
    const dom2 = document.createElement('p')
    dom2.innerHTML = `这是第${i}p`
    // 绑定点击事件
    // dom2.onclick = function () {
    //     alert(i)
    // }
    // 绑定点击事件
    dom2.addEventListener('click', function(e) {
        // alert(i)
        console.log(i, e)
    })
    domPage.appendChild(dom2)
}
dom1.appendChild(domPage)

